<template>
  <div class="page">
    <div class="title-box">
      <span class="title">百间夜招募进度报表</span>
      <span class="link-btn" @click="toPage(1)">查看明细</span>
    </div>
    <DateSelect class="date-box" @selectDate="selectDate($event,1)"/>
    <div class="table-box">
      <div class="tr">
        <div class="td dark">入住总人数</div>
        <div class="td">12</div>
        <div class="td dark">累计招募数</div>
        <div class="td">2321</div>
      </div>
      <div class="tr">
        <div class="td dark">百间夜招募数</div>
        <div class="td">123</div>
        <div class="td dark">拉黑&删除人数</div>
        <div class="td">22</div>
      </div>
      <div class="tr">
        <div class="td dark">拉黑率</div>
        <div class="td"></div>
        <div class="td dark">VIP客户数</div>
        <div class="td"></div>
      </div>
      <div class="tr">
        <div class="td dark">总出租间夜数</div>
        <div class="td">123</div>
        <div class="td dark"></div>
        <div class="td"></div>
      </div>
    </div>

    <div class="title-box">
      <span class="title">企微任务执行情况报表</span>
      <span class="link-btn" @click="toPage(2)">查看明细</span>
    </div>
    <DateSelect ref="childDate" class="date-box" @selectDate="selectDate($event,2)"/>
    <div class="table-box">
      <div class="tr">
        <div class="td dark">任务总数量</div>
        <div class="td">{{taskInfo.countAll || 0}}</div>
        <div class="td dark">已完成任务数量</div>
        <div class="td">{{taskInfo.countFinish || 0}}</div>
      </div>
      <div class="tr">
        <div class="td dark">已完成占比</div>
        <div class="td">{{taskInfo.finishRate || 0}}</div>
        <div class="td dark">未完成数量</div>
        <div class="td">{{taskInfo.countUnFinish || 0}}</div>
      </div>
      <div class="tr">
        <div class="td dark">未完成占比</div>
        <div class="td">{{taskInfo.unFinishRate || 0}}</div>
        <div class="td dark"></div>
        <div class="td"></div>
      </div>
    </div>
  </div>
</template>

<script>
import DateSelect from './components/dateSelect.vue'
import {formart} from '@/utils/dateUtils.js'

export default {
  data() {
    return {
      date1: [],
      date2: [],
    }
  },
  components: {
    DateSelect
  },
  created() {
    let date = formart(new Date(new Date().setDate(new Date().getDate() - 1)));
    this.date1 = [date,date];
    this.date2 = [date,date];
    this.detailReport()
  },
  methods: {
    detailReport() {
      this.taskInfo = {}
      let res = {
        "total": {
            "countAll": 40,
            "countFinish": 3,
            "finishRate": "7.50%",
            "countUnFinish": 37,
            "unFinishRate": "92.50%"
        }
      }
      if(res) {
        this.taskInfo = res.total
      }
    },
    selectDate(date,num) {
      if(num == 1) {
        //百间夜招募进度报表
        this.date1 = date
      }else {
        //企微任务执行情况报表
        this.date2 = date
        this.detailReport()
      }
    },
    toPage(title) {
      let newDate
      if(title == 1) {
        newDate = this.dateMethon(...this.date1)
        this.$router.push({path:'/reportDateils',query:{title:title,date1:newDate[0],date2:newDate[1]}});
      }else {
        newDate = this.dateMethon(...this.date2)
        this.$router.push({path:'/reportDateils',query:{title:title,date1:newDate[0],date2:newDate[1]}});
      }
    },
    //日期限制30天内
    dateMethon(date1,date2) {
      let date30 = new Date(new Date(date2).setDate(new Date().getDate()-30))
      let dateNum = new Date(date1.replace(/\-/g,'/')).getTime() // eslint-disable-line
      let dateNum2 = date30.getTime()
      let newDate = []
      if(dateNum < dateNum2) {
        newDate.push(formart(date30))
      }else {
        newDate.push(date1)
      }
      newDate.push(date2)
      return newDate
    }
  }
}
</script>

<style lang="less" scoped>
.page{
  padding: 15px 18px;
  min-width: 375px;
  box-sizing: border-box;
  .title-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 11px;
    .title{
      font-size: 14px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: #1B1F26;
      line-height: 19px;
    }
    .link-btn{
      font-size: 12px;
      font-family: MicrosoftYaHei;
      color: #0F9AF2;
      line-height: 16px;
    }
  }
  .date-box{
    margin-bottom: 10px;
  }
  .table-box{
    border: 1px solid #E8E8E8;
    min-width: 90%;
    margin-bottom: 20px;
    .tr{
      border-bottom: 1px solid #E8E8E8;
      height: 34px;
      display: flex;
      &:last-child{
        border-bottom: none;
      }
      .td{
        flex: 1;
        border-right: 1px solid #E8E8E8;
        height: 100%;
        font-size: 12px;
        font-family: ArialMT;
        color: #333333;
        text-align: center;
        line-height: 34px;
        &:last-child{
          border-right: none;
        }
      }
      .dark{
        flex: 2;
        min-width: 110px;
        background: #F0F4F5;
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: #666666;
      }
    }
  }
}
</style>